<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:th="http://www.thymeleaf.org">
  <head>
	<meta charset="UTF-8">
    <title>Title</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	  <!-- 引入Bootstrap核心文件 -->
	  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

	  <!-- jQuery(Bootstrap的JavaScript插件需要引入jQuery，务必在bootstrap.min.js之前引入) -->
	  <script th:src="@{/js/jquery.min.js}"></script>

	  <!-- 包括所有已编译的JS插件 -->
	  <script th:src="@{/js/bootstrap.min.js}"></script>
	
  </head>
  
  <body>
    <div class="container" style="font-family:微软雅黑;font-size:larger">
    	<div class="page-header">
        <h2 align="center">新闻列表</h2>
    </div>
			
			<div class="col-md-offset-1 col-md-10">
				<form action="" class="navbar-form navbar-left" role="search">
					<div class="form-group">
						新闻标题：
						<input type="text" class="form-control">
					</div>
					&nbsp;
					<div class="form-group">
						<button type="submit" class="btn btn-default">查询</button>
					</div>
				</form>
				
				<table class="table table-bordered">
					<thead>
						<tr align="center">
							<td>新闻编号</td>
							<td>新闻标题</td>
							<td>作者</td>
							<td>创建时间</td>
							<td>评论量</td>
							<td>操作</td>
						</tr>
					</thead>

					<tr th:each="list : ${newsList}">
						<td th:text="${list.newsCode}"></td>
						<td th:text="${list.title}"></td>
						<td th:text="${list.author}"></td>
						<td th:text="${list.createDate}"></td>
						<td th:text="${list.commentAccount}"></td>
						<td>
							<a href="#" target="news.html">查看新闻</a>
						</td>
					</tr>
					
				</table>
				
				<div align="center">
					<nav>
						<ul class="pagination">
							<li class="disabled"><a href="javascript:void(0);">首页</a></li>
							<li class="disabled"><a href="javascript:void(0);" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
							<li class="active"><a href="javascript:void(0);">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
							<li><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>
			
		</div>
	</div>
  </body>
  <script type="text/javascript">
	  $(document).ready(function () {
		  $("#query").click(function(){
			  alert(111);
			  $.ajax({
				  url:"localhost:8080/news/index",    //请求的url地址
				  dataType:"json",   //返回格式为json
				  async:true,//请求是否异步，默认为异步，这也是ajax重要特性
				  data:{"title":"${#title}","currentPage":1,"pageSize":5},    //参数值
				  type:"GET",   //请求方式
				  beforeSend:function(){
					  //请求前的处理
				  },
				  success:function(req){
					  //请求成功时处理
				  },
				  complete:function(){
					  //请求完成的处理
				  },
				  error:function(){
					  //请求出错处理
				  }
			  });
		  });
	  })
  </script>
</html>
